import React from 'react';
import LeftMenu from '../leftmenu/LeftMenu';
import { Layout, Menu, Breadcrumb, Icon } from 'antd';

const { Header, Content, Footer, Sider } = Layout;

export default class HomePage extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            collapsed: false, //菜单折叠状态
            mode: 'inline', //菜单显示模式，垂直 or 行内
        }
        this.onCollapse = this.onCollapse.bind(this);
    }
    onCollapse(collapsed) {
        let hash = this.refs.menu.retCheckMenu(window.location.hash.split('#/')[1]);
        const openChange = () => {
            if (collapsed) {
                this.refs.menu.onOpenChange(['']);
            } else {
                this.refs.menu.onOpenChange([hash]);
            }
        }
        Promise.resolve(openChange())
            .then(this.setState({
                collapsed,
                mode: collapsed ? 'vertical' : 'inline',
            }))
    }
    render() {
        return (
            <Layout>
                <Header><h1>页头</h1></Header>

                <Layout>
                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}
                        trigger={<Icon type={this.state.mode === 'inline' ? "double-left" : "double-right"} />}
                    >
                        <LeftMenu ref='menu' />
                    </Sider>
                    <Content>
                        {/*所有的内容盛放元素*/}
                        <h1>首页管理</h1>
                    </Content>
                </Layout>
            </Layout>
        )
    }
}